<template>
  <div>
    <div class="container">
      <div class="top">
        <div class="mainpage" @click="goShoppingMall">
          生活商城
        </div>
        <div class="test">
          <div class="personnal" v-if="DSuser" @click="goMember">个人中心</div>
          <div class="personnal" v-if="!DSuser" @click="goLogin">登录&nbsp;&nbsp;|</div>
          <div class="personnal" v-if="!DSuser" @click="goReginster">注册</div>
          <div class="shop">
            <img :src="shop" width="40px">
            <div class="cart" @click="goCart">购物车({{this.cartNumber}})</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="main-div">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState } from 'vuex';
  export default {
    name: 'Main',
    data() {
      return {
        shop: require('../../assets/image/shop.png'),
        searchIcon: require("@/assets/image/search.png")
      }
    },
    
    computed: {
      ...mapState(['cartNumber']),
      ...mapState(['DSuser'])
    },
    methods: {
      goCart(){
        this.$router.push({name: 'cart'});
      },
      goMember(){
        this.$router.push({name: 'member'});
      },
      goLogin(){
        this.$router.push({name: 'login'})
      },
      goReginster(){
        this.$router.push({name: 'register'})
      },
      goShoppingMall(){
        this.$router.push({name: 'shoppingMall'})
      },
    },
  }
</script>

<style scoped>
.container {
  width: 100%;
  height: 40px;
  background-color: #e5017d;
  margin-bottom: 20px;
}
.top {
  width: 1226px;
  height: 100%;
  margin: 0 auto;
  /* background-color: #; */
  position: relative;
}
.mainpage {
  position: absolute;
  font-size: 22px;
  /* color: #fff; */
  top: 9px;
  left: 10px;
}
.test {
  position: absolute;
  right: 0;
}
.shop {
  display: inline-block;
}
.personnal {
  display: inline-block;
  font-size: 16px;
  margin-right: 10px;
}
.cart {
  display: inline-block;
  font-size: 16px;
  margin-top: 2px;
}
</style>